<template>
  <div>
    <div class="alltitle">
      <div class="title-box">预警类型占比</div>
    </div>
    <div class="yjfx-chart">
      <div id="echart4" style="width: 500px; height: 260px"></div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, onUnmounted } from "vue";

let myEcharts = echarts;

onMounted(() => {
  initChart();
});

onUnmounted(() => {
  myEcharts.dispose;
});
function initChart() {
  let chart = myEcharts.init(document.getElementById("echart4"));
  let behaviorLogMap = [
    {
        "name": "声音",
        "value": 12
    },
    {
        "name": "烟雾",
        "value": 12
    },
    {
        "name": "雷达",
        "value": 6
    },
    {
        "name": "语音",
        "value": 57
    }
]
  let option = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c}",
    },

    /*legend: {
                x: 'center',
                y: '15%',
                data: [ '行业类', '基础设施类', '社会民生类','其他'],
                icon: 'circle',
                textStyle: {
                    color: '#81B3F3',
                }
            },*/
    calculable: true,
    series: [
      {
        name: "",
        type: "pie",
        //起始角度，支持范围[0, 360]
        // startAngle: 0,
        //饼图的半径，数组的第一项是内半径，第二项是外半径
        radius: "70%",
        //支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
        center: ["50%", "50%"], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
        //radius: ['30%', '40%'],
        //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
        // 'radius' 面积展现数据的百分比，半径展现数据的大小。
        //  'area' 所有扇区面积相同，仅通过半径展现数据大小
        // roseType: 'radius',
        //是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
        // avoidLabelOverlap: false,
        // 修改字体颜色的代码begin
        itemStyle: {
          normal: {
            label: {
              textStyle: {
                color: "#81B3F3",
                fontSize: 18,
                //fontWeight:'bolder'
              },
            },
            labelLine: {
              lineStyle: {
                color: "#81B3F3",
              },
            },
          },
        },
        label: {
          normal: {
            show: true,
            formatter: "{b}{c}",
          },
          emphasis: {
            show: true,
          },
        },
        labelLine: {
          normal: {
            show: true,
            length2: 20, //设置线长
          },
          emphasis: {
            show: true,
          },
        },
        data: behaviorLogMap,
        // [
        //     {
        //         value: 15,
        //         name: '剧烈运动',
        //         itemStyle: {
        //             normal: {
        //                 color: '#A859FF'
        //             }
        //         }
        //     },
        //     {
        //         value: 13,
        //         name: '人群聚集',
        //         itemStyle: {
        //             normal: {
        //                 color: '#FF9746'
        //             }
        //         }
        //     },
        //     {
        //         value: 18,
        //         name: '快速奔跑',
        //         itemStyle: {
        //             normal: {
        //                 color: '#34ABFF'
        //             }
        //         }
        //     },
        //     {
        //         value: 10,
        //         name: '滞留徘徊',
        //         itemStyle: {
        //             normal: {
        //                 color: '#6B8AFF',
        //                 fontSize: '16'
        //             }
        //         }
        //     },
        //     {
        //         value: 2,
        //         name: '攀高',
        //         itemStyle: {
        //             normal: {
        //                 color: '#b78a5c',
        //                 fontSize: '16'
        //             }
        //         }
        //     }
        //     ,
        //     {
        //         value: 2,
        //         name: '靠近',
        //         itemStyle: {
        //             normal: {
        //                 color: '#c93a19',
        //                 fontSize: '16'
        //             }
        //         }
        //     }
        //     ,
        //     {
        //         value: 21,
        //         name: '区域入侵',
        //         itemStyle: {
        //             normal: {
        //                 color: '#66c9ba',
        //                 fontSize: '16'
        //             }
        //         }
        //     }
        // ]
      },
    ],
  };

  chart.setOption(option);
  window.onresize = function () {
    chart.resize();
  };
}
</script>

<style scoped></style>
